<!-- 改为组件模式 -->
<template>
	<z-paging ref="paging" v-model="indexList" @query="queryList" safe-area-inset-bottom use-safe-area-placeholder :show-loading-more-no-more-view="false" :refresher-enabled = "false">
		<template slot="top">
			<cl-navbar autoBack placeholder :title="$t('group.group_list.title')"></cl-navbar>
			<view class="searchview">
				<u-search height="64rpx" :showAction="false" :clearabled="false" bgColor="#1e1f30" :inputStyle="{fontSize:'24rpx'}" :placeholder="$t('commonality.search')" @input="searchInput"></u-search>
			</view>
		</template>
			
		<view :key="index" v-for="(item, index) in searchlist"> 
			<view class="listitem"  @click="godetails(item.group_info)">
				<view class="listitem__left">
					<cl-avatar :src="item.group_info.avatar_url" size="100rpx"></cl-avatar>
				</view>
				<view class="listitem__right">
					<view class="listitem__right__top">
						<text class="listitem__right__top__nickname">{{item.group_info.group_name}}</text>
					</view>
					
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	export default {
		name: 'friendDetails',
		data() {
			return {
				indexList: [],
				searchval:''
			}
		},
		computed: {
			searchlist(){
				let newdata = this.indexList.filter(item => {
					// 根据名字筛选
					if (this.searchval && item.group_info && item.group_info.group_name.indexOf(this.searchval) === -1) {
						return false;
					}
					return true;
				});
				return newdata
			}
		},
		onLoad() {
		},
		methods: {
			searchInput(e){
				uni.$u.debounce(()=>{
					this.searchval = e
				}, 500,false)
			},
			godetails(item){
				this.$Router.push({
					name: 'chatGroupMsg',
					params: {
						group_id:item.group_id,
						group_name:item.group_name,
						avatar_url:item.avatar_url,
					}
				});
			},
			async queryList(pageNo, pageSize) {
				try{
					let res = await this.$api.groups.list({page:pageNo,limit:pageSize}) 
					if(res){
						this.$refs.paging.complete(res.data.list)
					}else{
						this.$refs.paging.complete(false)
					}
				}catch(e){
					this.$refs.paging.complete(false)
				}
			}
		},
	};
</script>

<style scoped lang="scss">
	.searchview {
		margin: 20rpx 30rpx;
		background-color: #1e1f30;
		border-radius: 60rpx;
		padding-right: 20rpx;
	}
		.listitem {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			position: relative;

			&.active {
				background-color: #1E1F30;
			}

			&__right {
				margin-left: 20rpx;
				flex: 1;

				&__top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					&__nickname {
						color: #fff;
						font-size: 28rpx;
					}

					&__time {
						color: #61626E;
						font-size: 20rpx;
					}
				}

				&__content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 15rpx;

					&__msg {
						flex: 1;
						font-size: 24rpx;
						color: #595A66;
					}
				}
			}
		}
</style>